<template>
  <div :class="badgeClasses">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'hologram' | 'success' | 'warning' | 'info'
  size?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  size: 'md'
})

// 变体样式配置
const variantClasses = computed(() => {
  const variants = {
    default: 'bg-primary-600 text-white border-primary-600',
    secondary: 'bg-background-700 text-text-secondary border-background-600',
    destructive: 'bg-error text-white border-error',
    outline: 'bg-transparent text-text-primary border-background-600',
    hologram: 'hologram-border bg-background-800/50 text-primary-300 border-primary-400/30',
    success: 'bg-success/20 text-success border-success/30',
    warning: 'bg-warning/20 text-warning border-warning/30',
    info: 'bg-info/20 text-info border-info/30'
  }
  return variants[props.variant]
})

// 尺寸样式配置
const sizeClasses = computed(() => {
  const sizes = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-1 text-sm',
    lg: 'px-3 py-1.5 text-base'
  }
  return sizes[props.size]
})

// 组合样式类
const badgeClasses = computed(() => {
  return [
    'inline-flex items-center rounded-full border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
    variantClasses.value,
    sizeClasses.value
  ]
})
</script>
